<template>
  <div/>
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import { debounce } from '@/utils'

  export default {
    props: {
      autoResize: {
        type: Boolean,
        default: true
      },
      data: {
        type: Object
      }
    },
    data() {
      return {
        chart: echarts
      }
    },
    mounted() {
      this.setOptions(this.data)
      if (this.autoResize) {
        this.__resizeHandler = debounce(() => {
          if (this.chart) {
            this.chart.resize()
          }
        }, 100)
        window.addEventListener('resize', this.__resizeHandler)
      }
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      if (this.autoResize) {
        window.removeEventListener('resize', this.__resizeHandler)
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      sidebarResizeHandler(e) {
        if (e.propertyName === 'width') {
          this.__resizeHandler()
        }
      },
      setOptions(data = {}) {
        this.chart = echarts.init(this.$el, 'wg')
        this.chart.setOption({
          /*tooltip : {
            formatter: "{a} <br/>{b} : {c}"
          },*/
          series: [
            {
              type: 'gauge',
              z: 3,
              min: data.min,
              max: data.max,
              /*startAngle: 269.5,
              endAngle: -89.5,*/
              splitNumber: 0,
              radius: '80%',
              axisLine: {            // 坐标轴线
                lineStyle: {
                  color: data.lineStyleColor,
                  width: 9
                }
              },
              axisTick: {            // 坐标轴小标记
                show: false,
                fontSize: 12
              },
              splitLine: {           // 分隔线
                show: false,
                fontSize: 12,
              },
              axisLabel: {
                show: false,
                fontSize: 12
              },
              title: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontSize: 14,
                offsetCenter: [0, '95%'],
                color: 'rgba(255,255,255,.8)'
              },
              detail: { formatter: '{value}' + data.dw,
                fontStyle:'italic',
                fontSize: 13,
                fontWeight: 'normal' },
              data: [{ value: data.value, name: data.title, textStyle: { color: 'rgba(255,255,255,.8)' } }]
            }
          ]
        })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  $width: calc((100vh - 7rem - 8px) * .16);
  .bottom-dashboard {
    position: absolute;
    left: 50%;
    width: $width;
    bottom: 3vh;
    height: $width;
    min-width: 60px;
    min-height: 60px;
    &-0 {
      margin-left: -21.5%;
    }
    &-1 {
      margin-left: -10%;
    }
    &-2 {
      margin-left: 3%;
    }
    &-3 {
      margin-left: 14.5%;
    }
  }

</style>
